<template>
    <div class="pie-container">
      <!-- 共用查询表单 -->
      <el-form @submit.prevent="fetchData" label-width="80px" class="compact-form">
        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="账户 1">
              <el-input v-model="input1" placeholder="请输入第一个值"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="账户 2">
              <el-input v-model="input2" placeholder="请输入第二个值"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="账户 3">
              <el-input v-model="input3" placeholder="请输入第三个值"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="账户 4">
              <el-input v-model="input4" placeholder="请输入第四个值"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item>
          <el-button type="primary" @click="fetchData">查询</el-button>
        </el-form-item>
      </el-form>
  
      <!-- 饼图 -->
      <div class="charts-container">
        <div id="sender-pie-chart" class="chart"></div>
        <div id="receiver-pie-chart" class="chart"></div>
      </div>
    </div>
  </template>
  
  <script>
  import * as echarts from 'echarts';
  import axios from 'axios';
  
  export default {
    data() {
      return {
        input1: '',
        input2: '',
        input3: '',
        input4: '',
        senderChartInstance: null,
        receiverChartInstance: null,
      };
    },
    mounted() {
      // 初始化 ECharts 实例
      this.senderChartInstance = echarts.init(document.getElementById('sender-pie-chart'));
      this.receiverChartInstance = echarts.init(document.getElementById('receiver-pie-chart'));
    },
    methods: {
      // 查询 Sender 和 Receiver 的数据
      fetchData() {
        if (!this.input1 && !this.input2 && !this.input3 && !this.input4) {
          this.renderSenderChart([]);
          this.renderReceiverChart([]);
          return;
        }
  
        // 同时请求 Sender 和 Receiver 的数据
        Promise.all([
          axios.get('http://localhost:9900/data/countBySenders', {
            params: {
              s1: this.input1,
              s2: this.input2,
              s3: this.input3,
              s4: this.input4,
            },
          }),
          axios.get('http://localhost:9900/data/countByReceiver', {
            params: {
              r1: this.input1,
              r2: this.input2,
              r3: this.input3,
              r4: this.input4,
            },
          }),
        ])
          .then(([senderResponse, receiverResponse]) => {
            const senderData = senderResponse.data.data.map((item) => ({
              value: item.recordCount,
              name: item.sender,
            }));
  
            const receiverData = receiverResponse.data.data.map((item) => ({
              value: item.recordCount,
              name: item.receiver,
            }));
  
            this.renderSenderChart(senderData);
            this.renderReceiverChart(receiverData);
          })
          .catch((error) => {
            console.error('Error fetching data:', error);
          });
      },
      // 渲染 Sender 饼图
      renderSenderChart(data) {
        const option = {
          title: {
            text: '交易发出占比图',
            left: 'center',
          },
          tooltip: {
            trigger: 'item',
          },
          legend: {
            orient: 'vertical',
            left: 'left',
          },
          series: [
            {
              name: '记录数',
              type: 'pie',
              radius: '50%',
              data: data,
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)',
                },
              },
            },
          ],
        };
        this.senderChartInstance.setOption(option);
      },
      // 渲染 Receiver 饼图
      renderReceiverChart(data) {
        const option = {
          title: {
            text: '交易接收占比图',
            left: 'center',
          },
          tooltip: {
            trigger: 'item',
          },
          legend: {
            orient: 'vertical',
            left: 'left',
          },
          series: [
            {
              name: '记录数',
              type: 'pie',
              radius: '50%',
              data: data,
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)',
                },
              },
            },
          ],
        };
        this.receiverChartInstance.setOption(option);
      },
    },
  };
  </script>
  
  <style scoped>
  .pie-container {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  .compact-form .el-form-item {
    margin-bottom: 10px; /* 控制输入框之间的间距 */
  }
  
  .charts-container {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin-top: 20px;
  }
  
  .chart {
    width: 48%;
    height: 400px; /* 统一饼图的高度 */
  }
  </style>
  